<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <style>
        .right {
            color: green;
            font-size: 12px;
        }

        .err {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // cookie模拟注册和登录 

    // 注册页   => 格式全都正确之后  => 进行注册(存到cookie中)
    // 登录页   => 对应注册信息登录
    //      (1)  注册的用户名 和 密码  (存在cookie)
    //      (2)  用户输入的用户名 和 密码    
    //       两个完全符合  (该用户不存在,账号或密码有误)
    // 主页   => 标识用户身份  
    //        用户登录  (欢迎您,xxxx)    没有登录(您好,请登录)

    // 课堂案例  敲一到两遍  然后在写作业 

    var userInp = document.getElementsByClassName("user")[0];
    var pwdInp = document.getElementsByClassName("pwd")[0];
    var phoneInp = document.getElementsByClassName("phone")[0];
    var emailInp = document.getElementsByClassName("email")[0];

    var btn = document.getElementsByClassName("btn")[0];
    // 多用户 判断是否存在 
    // 页面加载时  获取所有已存在的用户名  手机号  邮箱  => 失焦时可以判断 用户名  手机号  邮箱 是否注册
    var cookie = document.cookie;
    var userList = [];
    var phoneList = [];
    var emailList = [];
    var userFlag = false
    var pwdFlag = false
    var phoneFlag = false
    var emailFlag = false
    if (cookie) {  //  有cookie的时候在处理
        var dataList = cookie.split("; ");

        // console.log(dataList);
        for (var i = 0; i < dataList.length; i++) {  //遍历数据 取的每一条数据
            var item = dataList[i];  //"user=a123123", "pwd=123123", "email=123@qq.com", "phone=17386141517"

            console.log(item);
            var arr = item.split("=");
            // console.log(arr);
            var key = arr[0]; // "user_a123123","pwd","email"

            // console.log(key)
            var val = arr[1];
            // console.log(val)
            if (key.indexOf("user_") == 0) {

                userList.push(decodeURIComponent(val));
            }
            if (key.indexOf("phone_") == 0) {
                phoneList.push(decodeURIComponent(val));
            }
            if (key.indexOf("email_") == 0) {
                emailList.push(decodeURIComponent(val));
            }
        }
    }

    userInp.addEventListener('blur', function () {
        userFlag = false
        const str = userInp.value.trim()
        var x = new RegExp(/^[a-zA-Z_]\w{6,10}$/)
        if (x.test(str) && !(userList.some(function (item) {
            return item == str
        }))) {
            userFlag = true
            userInp.style.borderColor = "black"
        } else {
            userInp.style.borderColor = "red"
        }
    })

    pwdInp.addEventListener('blur', function () {
        pwdFlag = false
        const str = pwdInp.value.trim()
        var x = new RegExp(/^[a-zA-Z_]\w{6,10}$/)
        if (x.test(str)) {
            pwdFlag = true
            pwdInp.style.borderColor = "black"
        } else {
            pwdInp.style.borderColor = "red"
        }
    })



    phoneInp.addEventListener('blur', function () {
        phoneFlag = false
        const str = phoneInp.value.trim()
        var x = new RegExp(/^1[3-9]\d{9}$/)
        if (x.test(str) && !(phoneList.some(function (item) {
            return item == str
        }))) {
            phoneFlag = true
            phoneInp.style.borderColor = "black"
        } else {
            phoneInp.style.borderColor = "red"
        }
    })

    emailInp.addEventListener('blur', function () {
        emailFlag = false
        const str = emailInp.value.trim()
        var x = new RegExp(/^[^_$]\S{5,}@(qq|163|126)\.(com|net)$/)
        if (x.test(str) && (!phoneList.some(function (item) {
            return item == str
        }))) {
            emailFlag = true
            emailInp.style.borderColor = "black"
        } else {
            emailInp.style.borderColor = "red"
        }
    })
    btn.onclick = function () {
        var user = userInp.value.trim();
        var pwd = pwdInp.value.trim();
        var phone = phoneInp.value.trim();
        var email = emailInp.value.trim();

        if (user && pwd && phone && email) {

            // 单用户注册 (后注册的会覆盖前面的  键名相同)
            // setCookie("user", user, 7);
            // setCookie("pwd", pwd, 7);
            // setCookie("phone", phone, 7);
            // setCookie("email", email, 7);

            // 解决方法  让每一个键名都是唯一的 (将对用户作为键名的后缀)   => 多用户

            if (!getCookie("user_" + user)) {
                setCookie("user_" + user, user, 7);
                setCookie("pwd_" + user, pwd, 7);
                setCookie("phone_" + user, phone, 7);
                setCookie("email_" + user, email, 7);

                location.href = "./login.html";
            } else {
                alert("该用户已注册");
            }


        }

    }








</script>


</html>